<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <div class="dataItem" style="background:#00CAA6;">{{ memberStatics.allCount }} <p>全部会员</p></div>
      </el-col>
      <el-col :span="4">
        <div class="dataItem" style="background:#A76DF4;">{{ memberStatics.allInCount }}<p>在籍会员</p></div>
      </el-col>
      <el-col :span="4">
        <div class="dataItem" style="background:#4169EC;">{{ memberStatics.allNewCount }}<p>新增会员（30日）</p></div>
      </el-col>
      <el-col :span="4">
        <div class="dataItem" style="background:#FFB95F;">{{ memberStatics.soonExpiredCount }}<p>即将到期</p></div>
      </el-col>
      <el-col :span="4">
        <div class="dataItem" style="background:#b5b5b5;">{{ memberStatics.alreadyExpiredCount }}<p>已到期</p></div>
      </el-col>

    </el-row>

    <!-- 搜索区域 -->
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="姓名" prop="memberName">
        <el-input
          v-model="queryParams.memberName"
          placeholder="姓名"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="memberTelno">
        <el-input
          v-model="queryParams.memberTelno"
          placeholder="手机号"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col>
        <el-button type="primary" plain @click="toCardPage">会员卡设置</el-button>
        <el-button type="primary" plain @click="handleAdd">新增会员</el-button>
        <el-button type="primary" plain @click="importMen">导入会员</el-button>
        <el-button type="primary" plain @click="exportMen">导出会员</el-button>
        <el-button type="primary" plain :disabled="!single" @click="handleRenew">会员续费</el-button>
        <el-button type="primary" plain :disabled="!single" @click="handleReCard">更换卡号</el-button>
        <el-button type="warning" plain :disabled="!single" @click="handleBackCard">会员退卡</el-button>
        <el-button type="warning" plain @click="handleCheckCard">退卡核销</el-button>
      </el-col>
      <right-toolbar @queryTable="getList" />
    </el-row>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" :selectable="selectable" />
      <el-table-column label="会员类型" prop="cardTypeStr" min-width="120" />
      <el-table-column label="卡号" prop="cardCode" min-width="120" />
      <el-table-column label="姓名" prop="memberName" min-width="120" />
      <el-table-column label="性别" prop="sexStr" min-width="80" />
      <el-table-column label="生日" prop="memberBirth" min-width="120" />
      <el-table-column label="手机号" prop="memberTelno" min-width="120" />
      <el-table-column label="关联项目" prop="relateVenueProjectStrArray" min-width="120" />
      <el-table-column label="累计充值金额" prop="allRecharge" min-width="120" />
      <el-table-column label="账户余额" prop="balance" min-width="120" />
      <el-table-column label="累计消费金额" prop="allConsume" min-width="120" />
      <el-table-column label="最新充值时间" prop="lastRechargeTime" min-width="160" />
      <el-table-column label="订场时长(小时)" prop="allOrderTime" min-width="120" />
      <el-table-column label="过期时间" prop="expirationTime" min-width="120" />
      <el-table-column label="状态" prop="statusStr" min-width="100" />
      <el-table-column label="备注" prop="remark" min-width="100" />
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="300">
        <template #default="scope">
          <el-button type="text" @click="viewRow(scope.row)">详情</el-button>
          <el-button v-if="scope.row.status!=2" type="text" @click="updateRow(scope.row)">修改</el-button>
          <el-button v-if="scope.row.status!=2" type="text" @click="editDisCount(scope.row)">折扣修改</el-button>
          <el-button type="text" @click="consumeList(scope.row)">消费记录</el-button>
          <el-button type="text" @click="rechargrList(scope.row)">充值记录</el-button>
          <el-button v-if="scope.row.status==1" type="text" @click="editRecharge(scope.row)">充值</el-button>
          <el-button v-if="scope.row.status!=2" type="text" @click="changeStatus(scope.row)">{{ scope.row.status==0?'启用':'停用' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <dialogModifyMember :props="dialogModifyProps" :card-list="cardList" :relate-project-list="relateProjectList" @submitForm="resetQuery" />
    <dialogRenew :props="dialogRenewProps" :card-list="cardList" :relate-project-list="relateProjectList" @submitForm="resetQuery" />
    <dialogEditDisCount :props="dialogDisCountProps" @submitForm="resetQuery" />
    <!-- 充值 -->
    <dialogEditRecharge :props="dialogRechargeProps" @submitForm="resetQuery" />
    <dialogRechargeList :props="dialogRechargrListProps" />
    <dialogConsumeList :props="dialogConsumeListProps" />
    <!-- 导入 -->
    <dialogImport :props="dialogImportProps" @uploadSuccess="resetQuery" />
    <!-- 退卡核销 -->
    <dialogCheckList :props="dialogCheckProps" @uploadSuccess="resetQuery" />
    <!-- 退卡 -->
    <dialogRefund :props="dialogRefundProps" @submitForm="resetQuery" />
  </div>
</template>

<script setup name="Men">
import { getCurrentInstance, ref } from 'vue'
import { onMounted, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { changeMemberStatus, getCardList, relateProject, getMemberList, getMemberStatisticsInfo, refundCard } from '../../../api/ven/member'
import { useRouter } from 'vue-router'
import dialogModifyMember from './components/dialog/modifyMember'
import dialogRenew from './components/dialog/renew'
import dialogRefund from './components/dialog/refundCard'
import dialogEditDisCount from './components/dialog/editDiscount'
import dialogEditRecharge from './components/dialog/recharge'
import dialogRechargeList from './components/dialog/rechargeList'
import dialogConsumeList from './components/dialog/consumeList'
import dialogImport from './components/dialog/import'
import dialogCheckList from './components/dialog/checkList'


const router = useRouter()
const { proxy } = getCurrentInstance()

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    memberName: undefined
  },
  loading: false,
  tableData: [],
  total: 0,
  single: false,
  memberStatics: {},
  cardList: [],
  relateProjectList: []
})
const { queryParams, loading, tableData, total, single, memberStatics, cardList, relateProjectList } = toRefs(data)

let selectedIds = []
const dialogPropsBase = {
  open: false,
  isView: false,
  title: '',
  data: null
}
const dialogModifyProps = ref({
  ...dialogPropsBase
})
const dialogImportProps = ref({
  ...dialogPropsBase
})
const dialogCheckProps = ref({
  ...dialogPropsBase
})
const dialogRenewProps = ref({
  ...dialogPropsBase
})
const dialogRefundProps = ref({
  ...dialogPropsBase
})
const dialogDisCountProps = ref({
  ...dialogPropsBase
})
const dialogRechargeProps = ref({
  ...dialogPropsBase
})
const dialogRechargrListProps = ref({
  ...dialogPropsBase
})
const dialogConsumeListProps = ref({
  ...dialogPropsBase
})


// 获取列表
function getList() {
  loading.value = true
  getMemberList(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
function selectable(row, index) {
  if (row.status == 2) {
    return false
  } else {
    return true
  }
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

function toCardPage() {
  router.push('/ven/member/card')
}

function handleSelectionChange(selection) {
  selectedIds = selection.map(item => item.id)
  single.value = selection.length === 1
}

function handleAdd() {
  _.assign(dialogModifyProps.value, dialogPropsBase, {
    open: true,
    title: '新增会员信息'
  })
}
function handleCheckCard() {
  _.assign(dialogCheckProps.value, dialogPropsBase, {
    open: true,
    title: '退卡核销'
  })
}

function importMen() {
  _.assign(dialogImportProps.value, dialogPropsBase, {
    open: true,
    title: '导入会员'
  })
}

function exportMen() {
  // 导出
  proxy.download(
    '/systemj/member/exportList',
    {
      ...queryParams.value
    },
    `会员列表_${new Date().getTime()}.xlsx`
  )
}

/**
 * 续费
 */
function handleRenew() {
  const men = _.find(tableData.value, (t) => t.id === selectedIds[0])
  _.assign(dialogRenewProps.value, dialogPropsBase, {
    open: true,
    title: '会员续费',
    member: men
  })
}

function handleReCard() {

}

function handleBackCard() {
  const men = _.find(tableData.value, (t) => t.id === selectedIds[0])
  console.log(men.status)
  if (men.status == 2) {
    proxy.$modal.msgWarning('该会员已退卡,请勿重复操作')
  } else {
    _.assign(dialogRefundProps.value, dialogPropsBase, {
      open: true,
      title: '会员退卡',
      member: men
    })
  }
}

function viewRow(row) {
  _.assign(dialogModifyProps.value, dialogPropsBase, {
    open: true,
    isView: true,
    title: '查看会员信息',
    data: { ...row }
  })
}

function updateRow(row) {
  _.assign(dialogModifyProps.value, dialogPropsBase, {
    open: true,
    title: '编辑会员信息',
    data: { ...row }
  })
}
function editDisCount(row) {
  _.assign(dialogDisCountProps.value, dialogPropsBase, {
    open: true,
    title: '修改折扣',
    data: { ...row }
  })
}
function editRecharge(row) {
  _.assign(dialogRechargeProps.value, dialogPropsBase, {
    open: true,
    title: '充值',
    data: { ...row }
  })
}

function rechargrList(row) {
  _.assign(dialogRechargrListProps.value, dialogPropsBase, {
    open: true,
    title: '充值记录',
    data: { ...row }
  })
}
function consumeList(row) {
  _.assign(dialogConsumeListProps.value, dialogPropsBase, {
    open: true,
    title: '消费记录',
    data: { ...row }
  })
}

function changeStatus(row) {
  proxy.$modal
    .confirm(`确定操作？`)
    .then(() => {
      return changeMemberStatus(row)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('操作成功')
    })
}


function getMemberStatics() {
  getMemberStatisticsInfo()
    .then((res) => {
      memberStatics.value = res.data
    })
}

function getCards() {
  getCardList({ status: '1' }).then(res => {
    cardList.value = res.rows
  })
}
function getRelateProject() {
  relateProject().then(res => {
    relateProjectList.value = res.rows
  })
}

onMounted(() => {
  getList()
  getMemberStatics()
  getCards()
  getRelateProject()
})

</script>

<style scoped>
	.dataItem{  padding: 20px;  text-align: center;font-size: 24px;font-weight: bold;      color: #fff;  border-radius: 5px;}
	.dataItem p{font-size: 16px;    margin: 15px 0 0;}
</style>
